<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="marginTop">
      <el-breadcrumb-item >我的合同</el-breadcrumb-item>
    </el-breadcrumb>

      <!-- table表格区域 -->
      <el-table :data="List" border stripe style="width: 100%" class="marginTop">
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <!-- {{scope.row}} -->
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="id">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="合同标题">
                <span>{{ props.row.title }}</span>
              </el-form-item>
              <el-form-item label="签署时间">
                <span v-if="props.row.time===null">{{ props.row.time }}</span>
                <span v-if="props.row.time!==null">{{ props.row.time | formatDate }}</span>
              </el-form-item>
              <el-form-item label="是否已签署">
                <span>{{ props.row.signed | contractSigned}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="合同标题" prop="title"></el-table-column>
        <el-table-column label="是否已签署"  width="300px">
          <template slot-scope="isSigned">
            <span>{{isSigned.row.signed | contractSigned}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="400px">
          <template slot-scope="scope">
            <el-button    type="primary"  @click="contractDownload(scope.row.id)">下载合同</el-button>
            <el-button    type="primary"  @click="sign(scope.row.id)">签署合同</el-button>
            <el-button    type="primary"  @click="reject(scope.row.id)">驳回合同</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "contract",
    data() {
      return {
        List:[],
        // 总数据条数
      };
    },
    mounted() {
      this.getInfoList();
    },
    methods: {
      // 根据分页获取对应的数据
      async getInfoList() {
        let { data: res } = await this.$http.get("/user/contract");
        // 获取失败
        // if (res.meta.status !== 200) {
        //   return this.$message.error({
        //     message: res.meta.msg,
        //     duration: 1500,
        //   });
        // }
        this.List = res.data
        console.log('合同数据：',res.data);
      }
      ,
      contractDownload(id){
        this.$http.get('/user/contract/download/'+id).then(res =>{
          // this.$refs.downloadLink.href="http://localhost:8080/user/contract/download/"+id
          let link = document.createElement('a')
          link.href = "http://localhost:8080/user/contract/download/"+id
          link.style.display = 'none'
          link.target="_blank"
          link.click()
        })
      }
      ,
      async sign(id){
        let result =  this.$confirm('确定签署合同？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).catch(reason => reason)

        // 取消
        if(result === 'cancel'){
          return this.$message({
            message:'已取消签署',
            duration:2000
          })
        }
        let {data:res}= await this.$http.post('/user/contract/sign/'+id)
        if(res.code!==200){
          return this.$message.error({
            message: '签署合同失败',
            duration: 2000,
          });
        }
        this.$message.success({
          //利用vue的message弹框提示信息
          message: res.data,
          duration: 2000,
        });
        this.$router.push("/")
      },
      async reject(id){
        let result = await this.$confirm('确定驳回合同？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(reason => reason)


        if(result === 'cancel'){
          return this.$message({
            message:'已取消驳回合同',
            duration:2000
          })
        }
        let {data:res}=this.$http.post('/user/contract/reject/'+id)
        if(res.code!==200){
          return this.$message.error({
            message: '驳回合同失败',
            duration: 2000,
          });
        }
        this.$message({
          //利用vue的message弹框提示信息
          message: res.data,
          duration: 2000,
        });
      }
    }
  };
</script>

<style lang="less">
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 80%;
  }
  .marginTop{
    margin-top: 10px;
  }
</style>
